<template>
    <div class="order">
        <div class="userInfo" v-if="user.user">
            <img :src="user.user.portrait.url" alt="">
            <div>
                <span>{{user.user.nickname}}
                    <span class="boy" v-if="user.user.sex==1">
                        <img src="../images/boy.png" alt="">
                    </span>
                    <span class="girl" v-else>
                        <img src="../images/girl.png" alt="">
                    </span>
                </span>
                <br>
                <span @click="editUser"><i class="glyphicon glyphicon-edit" style="color: #E5B643"></i> 修改</span>
            </div>
        </div>
        <div class="orderInfo">
            <div class="orderTitle">
                <div class="myOrder" @click="isOrder=true">我的订单 <span v-if="orderTotal">({{orderTotal}})</span><div class="checkLine" v-if="isOrder"></div></div>
                <div class="myCollect" @click="isOrder=false">我的收藏 <span v-if="collectTotal">({{collectTotal}})</span><div class="checkLine" v-if="!isOrder"></div></div>
                <hr>
            </div>
            <div class="orderList" v-if="isOrder">
                <order-list @updata="upTotal"></order-list>
            </div>
            <div class="collectList" v-if="!isOrder">
                <collect-list @updata="upCollectTotal"></collect-list>
            </div>
        </div>
    </div>
</template>
<script>
require('./order.css');
var orderList=require('./lib/order.vue');
var collectList=require('./lib/collect.vue');
module.exports={
    components:{
        orderList:orderList,
        collectList:collectList,
    },
    data:function () {
        return{
            isOrder:true,//订单或收藏
            user:{},
            isLoad:false,
            orderTotal:null,
            collectTotal:null,
        }
    },
    methods:{
        editUser:function () {
            var _self=this;
            JxSdk.user.changeInfo().then(function (data) {
                console.log(data)
                _self.user=data;
            });
        },
        upTotal:function (val) {
            this.orderTotal = val;
        },
        upCollectTotal:function (val) {
            this.collectTotal = val;
        }
    },
    mounted:function () {
        var _self = this;
//        JxSdk.ready(function () {
            JxSdk.user.silentInfo().then(function (data) {
                _self.user = data;
                _self.isLoad=true;
            })
//        });
    }
}
</script>